<template>
  <div class="rounded-lg bg-white pb-2 mt-2 mx-4 w-[calc(100%-2rem)]">
    <van-form class="">
      <!-- 邮寄地址 -->
      <div v-if="showAddress">
        <van-field
          label-width="140"
          v-model="form.address"
          :label="$t('products.shippingAddress')"
          :placeholder="$t('products.shippingAddressPlaceholder')"
          class="form-field px-3" />
      </div>
      <van-field
        label-width="140"
        v-model="form.name"
        :label="$t('products.recipient')"
        :placeholder="$t('products.recipientPlaceholder')"
        class="form-field px-3" />

      <van-field
        label-width="140"
        v-model="form.mobile"
        :label="$t('products.phoneNumber')"
        :placeholder="$t('products.phoneNumberPlaceholder')"
        class="form-field px-3" />
      <!-- 邮箱 -->
      <van-field
        label-width="140"
        v-model="form.email"
        @input="handleEmailInput"
        :label="$t('products.emailAddress')"
        placeholder="XXXX@gmail.com"
        class="form-field px-3" />

      <div class="px-3">
        <van-checkbox v-model="form.subscribeMarketing" class="text-sm" icon-size="1rem" checked-color="#ff7a00">
          {{ $t("products.subscribeMarketing") }}
        </van-checkbox>
      </div>

      <div class="px-3 mt-3" v-if="!isLoggedIn">
        <div v-if="isZh && isRegister == false && form.email" class="tip-row flex items-center text-sm mb-1">
          <span>{{ $t("products.nonMember") }}</span>
          <van-button class="ml-1" type="primary" size="mini" plain color="#ff7a00" @click="handleRegister">
            {{ $t("products.oneClickRegister") }}
          </van-button>
          <span class="ml-1">{{ $t("products.getRm5Coupon") }}</span>
        </div>
        <div v-else-if="!isZh && isRegister == false && form.email" class="tip-row text-sm mb-1">
          <div>{{ $t("products.nonMember") }}</div>
          <div class="flex items-center">
            <van-button type="primary" size="mini" plain color="#ff7a00" @click="handleRegister">
              {{ $t("products.oneClickRegister") }}
            </van-button>
            <div class="ml-1">{{ $t("products.getRm5Coupon") }}</div>
          </div>
        </div>

        <!-- 已注册 立即登录 -->
        <div class="tip-row flex items-center text-sm" v-if="isRegister && form.email">
          <span>{{ $t("products.loginEarnCoins") }}</span>
          <van-button class="ml-1" type="primary" size="mini" plain color="#ff7a00" @click="handleLogin">
            {{ $t("products.oneClickLogin") }}
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Checkbox } from "vant"
import { checkRegister } from "@/apis/pay"
import { debounce } from "@/utils/common"
import { mapMutations, mapGetters } from "vuex"

export default {
  name: "AddressForm",
  components: {
    [Form.name]: Form,
    [Checkbox.name]: Checkbox,
  },
  data() {
    return {
      form: {
        address: "",
        name: "",
        mobile: "",
        email: "",
        subscribeMarketing: false,
      },
      isRegister: null,
    }
  },
  created() {
    // 创建防抖函数实例
    this.debouncedCheckRegister = debounce((value) => {
      if (!value || !value.includes(".")) return

      checkRegister({ email: value })
        .then((res) => {
          this.isRegister = res.data
          this.$emit("register-check", res.data)
        })
        .catch((err) => {
          console.log("checkRegister error :>> ", err)
        })
    }, 1000)
  },
  props: {
    addressData: {
      type: Object,
      default: () => ({}),
    },
    showAddress: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
      isLoggedIn: "auth/isLoggedIn",
    }),
  },
  methods: {
    ...mapMutations({
      setLoginDialogVisible: "auth/SET_LOGIN_DIALOG_VISIBLE",
    }),
    onSubmit(values) {
      console.log("表单提交:", values)
      this.$emit("form-submit", values)
    },
    handleRegister() {
      this.setLoginDialogVisible(true)
    },
    handleLogin() {
      this.setLoginDialogVisible(true)
    },
    getFormData() {
      return this.form
    },
    validateForm() {
      if (this.showAddress) {
        return this.form.address && this.form.name && this.form.mobile && this.form.email
      } else {
        return this.form.email
      }
    },
    handleEmailInput(value) {
      // 使用组件实例上的防抖函数
      this.debouncedCheckRegister(value)
    },
  },
  watch: {
    addressData: {
      handler(newVal) {
        // console.log("addressData :>> ", newVal)
        this.form = {
          address: newVal.country + newVal.city + newVal.detailAddress,
          name: newVal.name,
          mobile: newVal.mobile,
          email: newVal.email,
          subscribeMarketing: newVal.subscribeMarketing,
        }
      },
      deep: true,
    },
  },
}
</script>

<style scoped></style>
